<template>
  <div class="box">
    <!-- 引入搜索框 -->
    <div>
      <van-search @click="fn" show-action placeholder="请输入搜索关键词" />
    </div>
    <!-- 侧边列表 -->
    <div class="left">
      <van-sidebar v-model="activeKey" class="list"  >
        <van-sidebar-item
          @click="tabSearch(item.id)"
          v-for="(item, index) in leftArr"
          :key="index"
          :title="item.name"
          :id="item.id"
        />
      </van-sidebar>
    </div>
    <!-- 图片 -->
    <div class="rightTop">
      <img :src="imgArr.src" alt="" />
      <p>{{ imgArr.text }}</p>
      <div></div>
    </div>
    <CategoryList class="rightBottom" :rightArr="rightArr" :title="title" />
  </div>
</template>

<script>
// 导入vuex相关函数
import { mapState, mapMutations } from "vuex";
// 导入全部分类函数
import { GetCategory, GetCategoryS } from "../https/http";
// 导入列表组件
import CategoryList from "../components/CategoryList.vue";
export default {
  name: "Category",
  methods: {
    fn() {
      this.chanGe();
      this.$router.push({ name: "searchPopup" });
    },
    tabSearch(id){
      // console.log(this.$refs.list.$el);
      console.log(id);
      GetCategoryS(id).then(res=>{
        this.title=res.data.currentCategory.name
        this.imgArr = {
          src: res.data.currentCategory.banner_url,
          text: res.data.currentCategory.front_name,
        };
        this.rightArr = res.data.currentCategory.subCategoryList
      })

    },
    ...mapMutations(["chanGe"]),
  },
  data() {
    return {
      activeKey: 0,
      leftArr: [],
      imgArr: [],
      rightArr: [],
      title:"",
    };
  },
  computed: {
    ...mapState(["falge"]),
  },
  created() {
    GetCategory().then((res) => {
      // console.log(res);
      this.leftArr = res.data.categoryList;
    }),
      GetCategoryS().then((res) => {
        this.title=res.data.currentCategory.name
        this.imgArr = {
          src: res.data.currentCategory.banner_url,
          text: res.data.currentCategory.front_name,
        };
        this.rightArr = res.data.currentCategory.subCategoryList
      });
  },
  components: {
    CategoryList,
  },
};
</script>

<style lang="less" scoped >
.box {
  height: 780px;
  // position: relative;
  .left {
    width: 75px;
    height: 730px;
    background-color: #f7f8fa;
    .list {
      width: 75px;
    }
  }
  .rightTop {
    position: absolute;
    top: 55px;
    right: 7px;
    img {
      width: 285px;
      height: 140px;
      box-shadow: 0 0 5px #000;
      border-radius: 5px;
    }
    p {
      position: absolute;
      top: 60%;
      z-index: 10;
      transform: translateY(-30%);
      width: 100%;
      color: #fff;
      text-align: center;
      font-size: 16px;
    }
    div {
      width: 100%;
      height: 100%;
      background: rgb(66, 65, 65);
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 5;
      opacity: 0.5;
    }
  }
  .rightBottom {
    width: 285px;
    height: 300px;
    // background: darkgray;
    position: absolute;
    top: 0px;
    left: 85px;
    top: 210px;
  }
}
</style>